<template>
  <div class="saving-tips-view">
    <div class="save-init" v-if="status === SAVING_STATUS.init">
      <span class="saving-tips">{{ initTips }}</span>
    </div>
    <div class="saving" v-else-if="status === SAVING_STATUS.saving">
      <i class="el-icon-loading"></i>
      <span class="saving-tips">{{ savingTips }}</span>
    </div>
    <div class="save-success" v-else-if="status === SAVING_STATUS.success">
      <i class="el-icon-circle-check"></i>
      <span class="saving-tips">{{ successTips }}</span>
    </div>
    <div class="save-failed" v-else-if="status === SAVING_STATUS.failed">
      <i class="el-icon-warning-outline"></i>
      <span class="saving-tips">{{ failedTips }}</span>
    </div>
  </div>
</template>

<script>
import { SAVING_STATUS } from '@utility/dict'
export default {
  name: 'SavingTips',
  components: {},
  props: {
    status: { type: String },
    initTips: { type: String, default: '数据将自动保存' },
    savingTips: { type: String, default: '正在保存...' },
    successTips: { type: String, default: '自动保存成功！' },
    failedTips: { type: String, default: '保存失败！' },
  },
  data() {
    return {
      SAVING_STATUS: SAVING_STATUS._define,
    }
  },
}
</script>
<style lang="scss" scoped>
.saving-tips-view {
  display: inline-block;
  padding-left: 12px;
  cursor: default;
  line-height: 1;
  vertical-align: middle;
  color: #666;
  i {
    font-size: 14px;
    vertical-align: middle;
  }
  .saving-tips {
    vertical-align: middle;
    margin-left: 2px;
    font-size: 14px;
  }
}
</style>
